<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>


<div id="todo-list-example">
    <h2>組件 和 v-for</h2>
    <input
        v-model="newTodoText"
        v-on:keyup.enter="addNewTodo"
        placeholder="Add a todo"
    >
    <ul>
        <li
            is="todo-item"
            v-for="(todo, index) in todos"
            v-bind:title="todo"
            v-on:remove="todos.splice(index, 1)"
        ></li>
    </ul>

    <ul>
        <todo-item
            v-for="(todo, index) in todos"
            v-bind:title="todo"
            v-on:remove="todos.splice(index, 1)"
        ></todo-item>
    </ul>


    <h2>事件处理器</h2>
    <button v-on:click="warn('Form cannot be submitted yet.', $event)">
        Submit
    </button>

</div>




<script src="./lib/vue.js"></script>
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>

<script>
    Vue.component('todo-item', {
        template: `
            <li>\
              {{ title }}
              <button v-on:click="$emit(\'remove\')">X</button>
            </li>
          `,
        props: ['title']
    })

    new Vue({
        el: '#todo-list-example',
        data: {
            newTodoText: '',
            todos: [
                'Do the dishes',
                'Take out the trash',
                'Mow the lawn'
            ]
        },
        methods: {
            addNewTodo: function () {
                this.todos.push(this.newTodoText)
                this.newTodoText = ''
            },
            warn: function (msg, event) {
                if (event) {
                    event.preventDefault()
                    console.log('warn() method:', event.target.tagName, event.target)
                }
                alert(msg)
            }
        }
    })
</script>

</body>
</html>